<template>
	<view class="classes-container">
		<!-- 头部区域 -->
		<view class="header">
			<view class="header-content">
				<text class="page-title">我的班级</text>
				<text class="page-subtitle">查看已加入的班级和申请加入新班级</text>
			</view>
			<view class="header-action">
				<button class="join-btn" @click="showAddClassModal">
					<text class="join-btn-text">+加入班级</text>
				</button>
			</view>
		</view>

		<!-- 统计卡片区域 -->
		<view class="stats-section">
			<view class="stats-card">
				<view class="stats-icon joined-icon">
					<text class="icon-text">📚</text>
				</view>
				<view class="stats-content">
					<text class="stats-label">已加入班级</text>
					<text class="stats-number">{{ joinedClasses.length }}</text>
				</view>
			</view>
			
			<view class="stats-card">
				<view class="stats-icon pending-icon">
					<text class="icon-text">⏰</text>
				</view>
				<view class="stats-content">
					<text class="stats-label">待审核申请</text>
					<text class="stats-number">{{ pendingApplications }}</text>
				</view>
			</view>
			
			<view class="stats-card">
				<view class="stats-icon total-icon">
					<text class="icon-text">📊</text>
				</view>
				<view class="stats-content">
					<text class="stats-label">总课程数</text>
					<text class="stats-number">{{ totalCourses }}</text>
				</view>
			</view>
		</view>

		<!-- 班级列表区域 -->
		<view class="classes-section">
			<text class="section-title">已加入的班级</text>
			
			<!-- 有班级时显示列表 -->
			<view v-if="joinedClasses.length > 0" class="classes-list">
				<view 
					v-for="(classItem, index) in joinedClasses" 
					:key="index" 
					class="class-card"
					@click="goToClassDetail(classItem)"
				>
					<view class="class-avatar">
						<text class="avatar-text">{{ classItem.name.charAt(0) }}</text>
					</view>
					
					<view class="class-info">
						<view class="class-header">
							<text class="class-name">{{ classItem.name }}</text>
							<view v-if="classItem.tag" class="class-tag">{{ classItem.tag }}</view>
						</view>
						
						<view class="class-details">
							<text class="detail-item">年级: {{ classItem.grade }}</text>
							<text class="detail-item">班主任: {{ classItem.teacher }}</text>
							<text class="detail-item">学生: {{ classItem.studentCount }}人</text>
							<text class="detail-item">加入时间: {{ classItem.joinTime }}</text>
						</view>
					</view>
					
					<view class="class-actions">
						<button class="action-btn primary" @click.stop="goToClassDetail(classItem)">
							查看详情
						</button>
						<button class="action-btn secondary" @click.stop="exitClass(classItem)">
							退出班级
						</button>
					</view>
				</view>
			</view>
			
			<!-- 无班级时显示空状态 -->
			<view v-else class="empty-state" @click="showAddClassModal">
				<view class="empty-content">
					<view class="empty-icon-wrapper">
						<text class="empty-icon">📚</text>
					</view>
					<text class="empty-message">你还没有班级，请加入班级</text>
					<view class="empty-hint">
						<text class="hint-text">点击此处加入班级</text>
						<text class="hint-arrow">→</text>
					</view>
				</view>
				<view class="empty-decoration">
					<text class="decoration-dot"></text>
					<text class="decoration-dot"></text>
					<text class="decoration-dot"></text>
				</view>
			</view>
		</view>

		<!-- 加入班级弹窗 -->
		<view v-if="showAddModal" class="modal-overlay" @click="hideAddClassModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<view class="modal-header-content">
						<text class="modal-emoji">🎓</text>
						<text class="modal-title">加入班级</text>
						<text class="modal-subtitle">开始你的学习之旅</text>
					</view>
					<view class="modal-close-btn" @click="hideAddClassModal">
						<text class="modal-close">×</text>
					</view>
				</view>
				
				<view class="modal-body">
					<view class="method-selection">
						<text class="selection-title">选择加入方式</text>
						<view class="input-tabs">
							<view 
								class="tab-item" 
								:class="{ active: addMethod === 'id' }" 
								@click="switchAddMethod('id')"
							>
								<text class="tab-icon">🔢</text>
								<text class="tab-text">班级ID</text>
							</view>
							<view 
								class="tab-item" 
								:class="{ active: addMethod === 'code' }" 
								@click="switchAddMethod('code')"
							>
								<text class="tab-icon">🎫</text>
								<text class="tab-text">邀请码</text>
							</view>
						</view>
					</view>
					
					<view class="input-section">
						<view class="input-wrapper">
							<view class="input-label">
								<text class="input-label-text">{{ addMethod === 'id' ? '班级ID' : '邀请码' }}</text>
								<text class="input-required">*</text>
							</view>
							<input 
								v-if="addMethod === 'id'"
								class="modal-input" 
								type="text" 
								v-model="classId"
								placeholder="请输入班级ID (例如: CLS20250101)"
								maxlength="20"
							/>
							<input 
								v-if="addMethod === 'code'"
								class="modal-input" 
								type="text" 
								v-model="inviteCode"
								placeholder="请输入6位邀请码 (例如: ABC123)"
								maxlength="10"
							/>
						</view>
					</view>
					
					<view class="help-section">
						<text class="help-text">💡 {{ addMethod === 'id' ? '班级ID可以向老师或同学询问' : '邀请码由班级管理员提供' }}</text>
					</view>
					
					<view class="modal-actions">
						<button class="modal-btn cancel" @click="hideAddClassModal">
							<text class="btn-text">取消</text>
						</button>
						<button class="modal-btn confirm" @click="joinClass" :disabled="!canJoin">
							<view class="btn-content">
								<text class="btn-icon">✨</text>
								<text class="btn-text">立即加入</text>
							</view>
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed, onMounted } from 'vue';

	// 响应式数据 - 添加四个示例班级
	const joinedClasses = ref([
		{
			id: 'cls001',
			name: '数学提高班',
			grade: '高一',
			teacher: '张老师',
			studentCount: 45,
			joinTime: '2025-01-15',
			tag: '重点班',
			description: '专注于高中数学知识的深入学习和提高'
		},
		{
			id: 'cls002',
			name: '英语口语班',
			grade: '高二',
			teacher: '李老师',
			studentCount: 38,
			joinTime: '2025-02-20',
			tag: '特色班',
			description: '提高英语口语表达能力和实际应用能力'
		},
		{
			id: 'cls003',
			name: '物理竞赛班',
			grade: '高三',
			teacher: '王老师',
			studentCount: 30,
			joinTime: '2025-03-10',
			tag: '竞赛班',
			description: '为物理竞赛做准备，深入学习物理知识'
		},
		{
			id: 'cls004',
			name: '化学实验班',
			grade: '高二',
			teacher: '赵老师',
			studentCount: 42,
			joinTime: '2025-04-05',
			tag: '实验班',
			description: '通过实验加深对化学知识的理解和应用'
		}
	]);

	const pendingApplications = ref(0);
	const totalCourses = ref(16);
	const showAddModal = ref(false);
	const addMethod = ref('id'); // 'id' or 'code'
	const classId = ref('');
	const inviteCode = ref('');

	// 计算属性
	const canJoin = computed(() => {
		if (addMethod.value === 'id') {
			return classId.value.trim().length > 0;
		} else {
			return inviteCode.value.trim().length > 0;
		}
	});

	// 页面方法
	const showAddClassModal = () => {
		showAddModal.value = true;
		// 重置输入
		classId.value = '';
		inviteCode.value = '';
		addMethod.value = 'id';
	};

	const hideAddClassModal = () => {
		showAddModal.value = false;
	};

	const switchAddMethod = (method) => {
		addMethod.value = method;
		// 清空输入
		classId.value = '';
		inviteCode.value = '';
	};

	const joinClass = async () => {
		if (!canJoin.value) return;
		
		try {
			// 这里应该调用实际的API
			const searchValue = addMethod.value === 'id' ? classId.value : inviteCode.value;
			console.log('尝试加入班级:', searchValue);
			
			// 模拟API调用
			uni.showLoading({ title: '加入中...' });
			setTimeout(() => {
				uni.hideLoading();
				uni.showToast({
					title: '申请已提交，等待审核',
					icon: 'success'
				});
				hideAddClassModal();
				// 这里可以刷新待审核数量
				pendingApplications.value += 1;
			}, 1500);
		} catch (error) {
			uni.hideLoading();
			uni.showToast({
				title: '加入失败，请重试',
				icon: 'error'
			});
		}
	};

	const goToClassDetail = (classItem) => {
		// 先导航到班级页面
		uni.navigateTo({
			url: `/pages/class/class?classId=${classItem.id}&className=${encodeURIComponent(classItem.name)}&classDescription=${encodeURIComponent(classItem.description)}&classGrade=${encodeURIComponent(classItem.grade)}`
		});
	};

	const exitClass = (classItem) => {
		uni.showModal({
			title: '确认退出',
			content: `确定要退出"${classItem.name}"吗？`,
			success: (res) => {
				if (res.confirm) {
					// 这里应该调用实际的API
					const index = joinedClasses.value.findIndex(item => item.id === classItem.id);
					if (index > -1) {
						joinedClasses.value.splice(index, 1);
						uni.showToast({
							title: '已退出班级',
							icon: 'success'
						});
					}
				}
			}
		});
	};

	// 页面生命周期
	onMounted(() => {
		// 可以在这里加载实际数据
		console.log('我的班级页面加载完成');
	});
</script>

<style lang="scss">
.classes-container {
	min-height: 100vh;
	background-color: #f5f5f5;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 40rpx 30rpx 30rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;

	.header-content {
		flex: 1;
		
		.page-title {
			display: block;
			font-size: 48rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}
		
		.page-subtitle {
			display: block;
			font-size: 28rpx;
			opacity: 0.8;
		}
	}

	.header-action {
		.join-btn {
			background-color: rgba(255, 255, 255, 0.2);
			border: 2rpx solid rgba(255, 255, 255, 0.3);
			border-radius: 50rpx;
			padding: 16rpx 32rpx;
			
			.join-btn-text {
				color: white;
				font-size: 28rpx;
				font-weight: 500;
			}
		}
	}
}

.stats-section {
	display: flex;
	padding: 30rpx;
	gap: 20rpx;

	.stats-card {
		flex: 1;
		background: white;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

		.stats-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;

			.icon-text {
				font-size: 32rpx;
			}

			&.joined-icon {
				background-color: #e3f2fd;
			}
			&.pending-icon {
				background-color: #fff3e0;
			}
			&.total-icon {
				background-color: #e8f5e8;
			}
		}

		.stats-content {
			flex: 1;
			
			.stats-label {
				display: block;
				font-size: 24rpx;
				color: #999;
				margin-bottom: 8rpx;
			}
			
			.stats-number {
				display: block;
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}
	}
}

.classes-section {
	padding: 0 30rpx 30rpx;

	.section-title {
		display: block;
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
	}
}

.classes-list {
	.class-card {
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);

		.class-avatar {
			width: 80rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;

			.avatar-text {
				color: white;
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.class-info {
			flex: 1;
			
			.class-header {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;
				
				.class-name {
					font-size: 32rpx;
					font-weight: 600;
					color: #333;
					margin-right: 16rpx;
				}
				
				.class-tag {
					background-color: #1976d2;
					color: white;
					font-size: 20rpx;
					padding: 4rpx 12rpx;
					border-radius: 10rpx;
				}
			}
			
			.class-details {
				.detail-item {
					display: inline-block;
					font-size: 24rpx;
					color: #666;
					margin-right: 24rpx;
					margin-bottom: 8rpx;
				}
			}
		}

		.class-actions {
			display: flex;
			flex-direction: column;
			gap: 16rpx;

			.action-btn {
				padding: 12rpx 24rpx;
				border-radius: 12rpx;
				font-size: 24rpx;
				border: none;
				min-width: 120rpx;
				
				&.primary {
					background-color: #1976d2;
					color: white;
				}
				
				&.secondary {
					background-color: #f5f5f5;
					color: #666;
					border: 2rpx solid #ddd;
				}
			}
		}
	}
}

.empty-state {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 30rpx;
	padding: 60rpx 40rpx;
	text-align: center;
	box-shadow: 0 8rpx 25rpx rgba(102, 126, 234, 0.25);
	position: relative;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.3s ease;

	&:active {
		transform: scale(0.98);
		box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.3);
	}

	.empty-content {
		position: relative;
		z-index: 2;
	}

	.empty-icon-wrapper {
		margin-bottom: 30rpx;
		
		.empty-icon {
			font-size: 100rpx;
			filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.1));
		}
	}

	.empty-message {
		display: block;
		font-size: 36rpx;
		font-weight: 600;
		color: white;
		margin-bottom: 20rpx;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.empty-hint {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
		margin-top: 20rpx;
		
		.hint-text {
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.9);
		}
		
		.hint-arrow {
			font-size: 32rpx;
			color: rgba(255, 255, 255, 0.8);
			animation: bounce 2s infinite;
		}
	}

	.empty-decoration {
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		gap: 12rpx;
		opacity: 0.6;
		
		.decoration-dot {
			width: 12rpx;
			height: 12rpx;
			background: rgba(255, 255, 255, 0.4);
			border-radius: 50%;
			display: block;
		}
	}
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateX(0);
	}
	40% {
		transform: translateX(10rpx);
	}
	60% {
		transform: translateX(5rpx);
	}
}

// 弹窗样式
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8));
	backdrop-filter: blur(10rpx);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.modal-content {
	background: white;
	border-radius: 32rpx;
	width: 640rpx;
	max-width: 90%;
	max-height: 85%;
	overflow: hidden;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
	animation: slideUp 0.3s ease;
	position: relative;
}

@keyframes slideUp {
	from { 
		opacity: 0;
		transform: translateY(60rpx) scale(0.9);
	}
	to { 
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.modal-header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 50rpx 40rpx 40rpx;
	color: white;
	position: relative;
	overflow: hidden;

	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
		opacity: 0.3;
	}

	.modal-header-content {
		position: relative;
		z-index: 2;
		text-align: center;
	}

	.modal-emoji {
		font-size: 60rpx;
		display: block;
		margin-bottom: 15rpx;
		filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.2));
	}

	.modal-title {
		font-size: 42rpx;
		font-weight: 700;
		color: white;
		margin-bottom: 8rpx;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.modal-subtitle {
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.9);
		opacity: 0.8;
	}

	.modal-close-btn {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
		width: 60rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 3;
		transition: all 0.3s ease;

		&:active {
			background: rgba(255, 255, 255, 0.3);
			transform: scale(0.9);
		}

		.modal-close {
			font-size: 42rpx;
			color: white;
			line-height: 1;
		}
	}
}

.modal-body {
	padding: 50rpx 40rpx 40rpx;
}

.method-selection {
	margin-bottom: 40rpx;

	.selection-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 24rpx;
		display: block;
	}
}

.input-tabs {
	display: flex;
	gap: 16rpx;
	margin-bottom: 40rpx;

	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 24rpx 16rpx;
		border: 3rpx solid #f0f0f0;
		border-radius: 20rpx;
		transition: all 0.3s ease;
		background: #fafafa;
		cursor: pointer;

		.tab-icon {
			font-size: 40rpx;
			margin-bottom: 10rpx;
			opacity: 0.6;
		}

		.tab-text {
			font-size: 26rpx;
			color: #666;
			font-weight: 500;
		}

		&.active {
			background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
			border-color: #667eea;
			transform: translateY(-2rpx);

			.tab-icon {
				opacity: 1;
				transform: scale(1.1);
			}

			.tab-text {
				color: #667eea;
				font-weight: 600;
			}
		}
	}
}

.input-section {
	margin-bottom: 30rpx;

	.input-wrapper {
		.input-label {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;
			gap: 6rpx;

			.input-label-text {
				font-size: 28rpx;
				font-weight: 600;
				color: #333;
			}

			.input-required {
				font-size: 28rpx;
				color: #ff4757;
			}
		}

		.modal-input {
			width: 100%;
			padding: 36rpx 28rpx;
			border: 3rpx solid #e8e8e8;
			border-radius: 16rpx;
			font-size: 32rpx;
			box-sizing: border-box;
			background: #fafafa;
			transition: all 0.3s ease;
			min-height: 100rpx;

			&:focus {
				border-color: #667eea;
				background: white;
				box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
			}
		}
	}
}

.help-section {
	margin-bottom: 40rpx;
	padding: 20rpx;
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
	border-radius: 16rpx;
	border-left: 6rpx solid #667eea;

	.help-text {
		font-size: 26rpx;
		color: #555;
		line-height: 1.5;
	}
}

.modal-actions {
	display: flex;
	gap: 20rpx;

	.modal-btn {
		flex: 1;
		padding: 20rpx 24rpx;
		border-radius: 16rpx;
		font-size: 28rpx;
		border: none;
		font-weight: 600;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;

		&.cancel {
			background: #f8f9fa;
			border: 3rpx solid #e9ecef;
			color: #666;

			&:active {
				background: #e9ecef;
				transform: scale(0.98);
			}

			.btn-text {
				color: #666;
			}
		}

		&.confirm {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			box-shadow: 0 8rpx 25rpx rgba(102, 126, 234, 0.3);

			&:active {
				transform: scale(0.98);
				box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.4);
			}

			&:disabled {
				background: #ddd;
				color: #999;
				box-shadow: none;
				transform: none;

				.btn-content {
					opacity: 0.6;
				}
			}

			.btn-content {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 8rpx;

				.btn-icon {
					font-size: 24rpx;
				}

				.btn-text {
					color: white;
					font-weight: 600;
				}
			}
		}
	}
}
</style>
